import Phaser from 'phaser'

export class HelpScene extends Phaser.Scene {
  constructor() {
    super('HelpScene')
  }

  create() {
    // 半透明背景遮罩
    const overlay = this.add.rectangle(640, 360, 1280, 720, 0x000000, 0.8)
    overlay.setInteractive()

    // 帮助面板
    const panel = this.add.rectangle(640, 360, 800, 600, 0x1F2937, 0.95)
    panel.setStrokeStyle(2, 0x374151)

    // 标题
    const title = this.add.text(640, 100, '🌟 星际数字跳跃 - 游戏说明', {
      fontSize: '28px',
      color: '#22D3EE',
      fontFamily: 'Arial, sans-serif'
    }).setOrigin(0.5)

    // 说明内容
    const helpText = `
🚀 三种游戏模式：

【黑洞纠错台】- 读写纠错训练
• 看数字，选择正确的中文读法
• 训练大数的标准读法规则
• 奖励：🌸 (按F键给当前队伍加分)

【单位跃迁台】- 十进制合成
• 模拟十进一的合成过程
• 从万级逐步合成到目标级别
• 奖励：⭐ (按S键给当前队伍加分)

【星际对比跳】- 大小比较
• 比较两个大数的大小
• 学习通过最高数级快速判断
• 奖励：🌍 (按E键给当前队伍加分)

🎮 操作说明：
• 点击顶部按钮切换游戏模式
• 数字键1-7：选择队伍
• F/S/E键：给当前队伍加对应奖励
• R键：重置所有队伍分数
• Ctrl/Cmd+S：保存当前分数
• 空格键：静音/取消静音
• F11：全屏/退出全屏
• H键：显示/隐藏此帮助
• F12键：开发者调试面板（开发模式）

📚 教学建议：
• 建议每个模式游戏3-5分钟
• 鼓励学生说出解题思路
• 利用小组竞赛激发参与热情
• 重点关注学生的数感培养

🔧 技术信息：
• 游戏支持1280x720分辨率
• 自动适配不同性能设备
• 支持键盘和鼠标操作
• 数据自动保存到本地
    `

    const content = this.add.text(640, 380, helpText, {
      fontSize: '16px',
      color: '#E5E7EB',
      fontFamily: 'Arial, sans-serif',
      align: 'left',
      lineSpacing: 8
    }).setOrigin(0.5)

    // 关闭按钮
    const closeBtn = this.add.text(640, 620, '点击任意处关闭', {
      fontSize: '18px',
      color: '#FDE047',
      fontFamily: 'Arial, sans-serif'
    }).setOrigin(0.5)

    // 闪烁效果
    this.tweens.add({
      targets,
      alpha: 0.5,
      duration: 1000,
      yoyo,
      repeat: -1
    })

    // 点击任意处关闭
    overlay.on('pointerdown', () => {
      this.scene.stop()
    })

    // ESC键关闭
    this.input.keyboard?.on('keydown-ESC', () => {
      this.scene.stop()
    })

    // H键关闭
    this.input.keyboard?.on('keydown-H', () => {
      this.scene.stop()
    })
  }
}
